﻿<%@ Page Title="" Language="C#" MasterPageFile="~/admin/admin-site.Master" AutoEventWireup="true" CodeBehind="TracksTimeSlots.aspx.cs" Inherits="CodeCamp12.admin.TracksTimeSlots" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" runat="server">
    <style type="text/css">
        .td_left {
            width: 20px;
        }
        
        .style1
        {
            vertical-align: top;
            width: 100px;
        }
        
        .style2
        {
            width: 100px;
        }

    </style>
    
    <script src="../Scripts/TrackTimeSlots.js" type="text/javascript"></script>
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="cphBody" runat="server">
    <div id="EventDetails">
        <h3>We are editing the detailed schedule for <label class="lblEventName"></label></h3>
        <button id="btnCreateTrack" >Create Track</button> 
        <button id="btnCreateTimeSlots" >Split the event in time slots</button>
        <br />
        <br />
        <br />
        Current tracks for <label class="lblEventName"></label>
        <div id="Tracks">
                 
        </div>
    </div>
    
    
    <div id="InsertSessionDialog">
       <div id="SessionsForEvent"></div>
       <div id="TimeSlotsForEvent"></div>
       <button id="remeberSessionTrackTime" onclick=" InsertSessionTrackTime()">Remember my choice</button>
       <br/>
       <label class="error" id="lblSessionInTrackError" style="display: none">You must choose both session and time slot!</label>
    </div>

    <div id="insertTrackDialog" style="display: none">
        <form id="insertTrackValidation" method="GET" action="">
            <table>
                <tr>
                    <td class="style1">Track name</td><td><input type="text" id="txtTrackName" name="trackname"/></td>
                </tr>
                <tr>
                    <td class="style1">Track color</td>
                    <td>
                        <input type="text" id="txtTrackColor" name="trackcolor"/>
                        <input type="text" id="colorpicker" name="colorpicker" onchange="changeColor();"/>
                    </td>
                </tr>
            </table>
            Description (if any):
            <br/>
            <textarea id="txtDescription"></textarea>
            <br/>
            <button id="btnInsertTrack" type="button" onclick="InsertTrack();">Insert track</button>
        </form>
    </div>
    

    <div id="splitInTimeSlotsDialog" style="display: none" >
     
        Creating time slots for <label class="lblEventName"></label>
        <br/>
        This event will take plase on <label id="lblEventDate"></label>, 
        <br/>starting from <label id="lblStartsAt"></label>
        <br/>
        <button id="showSlots" >Show created time slots</button>
        <br/>
        <div style="display: none; border: 1px inset blue;" id="unavailableTimeSlots">
            
        </div>
        <form id="timeSlotsValidation" method="GET" action="">
        <table>
            <tr>
                <td class="style2">Starting Time</td><td><input type="text" id="txtTimeStart" name="timestart"/></td>
            </tr>
            <tr>
                <td class="style2">Ending Time</td><td><input type="text" id="txtTimeEnd" name="timeend"/></td>
            </tr>
            <tr>
                 <td class="style2">Type</td>
                 <td>
                     <select id="ddlType">
                         <option>Registration</option>
                         <option>Opening/Keynote</option>
                         <option>Presentation</option>
                         <option>Break</option>
                         <option>Lunch</option>
                         <option>Closing Raffle</option>
                     </select>
                 </td>
            </tr>
        </table>
        <button type="button" onclick="InsertTimeSlot();">Add another one</button>
      </form>
    </div>
    
    
     <script id="MiniSessionTemplate" type="text/x-jQuery-tmpl">
                <div class="sessionDiv">
                <table>
                <tr>
                    <td class="td_left"><input type="radio" value="${ID}" name="rbSession"/> </td>
                    <td>
                        <a href="#">${Title}</a>
                        <br/>
                        by ${Speakers}
                    </td>
                </tr>
                </table>
                </div>
     </script>    
     <script id="TimeSlotTemplate" type="text/x-jQuery-tmpl">
                <div class="timeSlotDiv">
                    <table>
                    <tr>
                    <td class="td_left"><input type="radio" value="${ID}" name="rbTimeSlot"/> </td>
                    <td >
                        From: <strong>${from}</strong>
                        <br/>
                        To: <strong>${to}</strong> 
                    </td>
                </tr>
                </table>
                </div>
     </script>

     <script id="SessionTemplate" type="text/x-jQuery-tmpl">
         <div class="sessionDivStart">
               <a href="#"><strong>${Title}</strong></a>
               <br/>
               [${From} - ${To}]
               <br/>
               by <a href="#">${Speakers}</a> 
               <br/>
               <div style="text-align: right"><button onclick="DeleteSessionFromTrack('${ID}')">D</button></div>
         </div>
     </script>    
     
     <script id="TrackTemplate" type="text/x-jQuery-tmpl">
                <div class="trackStyle">
                    <div class="trackName"  style="background-color:${trackColor}">
                       ${trackName} <button style="float: right" onclick="DeleteTrack('${trackID}')">D</button>
                    </div>
                    <button id="btnAddSession" onclick="InsertSessionInTrack('${trackID}');"> Add session to this track </button>
                    <div class="sessions"  id="${trackID}">
                    
                    </div>
                    
                </div>
            </script>       
</asp:Content>
